<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="modify()">打开输入框</button>
<button onclick="loading()">打开加载框</button>

</body>
<!--必须又jquery才能用,且jquery必须在layer之前声明-->
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="/static/layer-v3.5.1/layer/layer.js"> </script>

<script>
    /*点击修改按钮弹出修改框*/
    function modify() {
        layer.open({
            type: 1,
            value: '初始值',
            title: ['&nbsp;&nbsp;&nbsp;修改信息', 'font-size:18px;text-align:center;display:flex;justify-content: center'],//false表示不显示标题,这个标题就是div里面的文字，css是加在这个div上面的,可以在浏览器看源码
            skin: 'layui-layer-rim', //加上边框
            area: ['420px', '240px'], //宽高

            btn: ['确定', '取消'],//按钮1的回调是yes，而从按钮2开始，则回调为btn2: function(){}，以此类推
            btnAlign: 'c',//按钮居中对齐

            content: `<div style="background-color: white;width:100%;height:100%;display: flex;flex-direction: column;justify-content: space-around;align-items: center">
                <input type="text" id="book_name" style="width: 200px" placeholder="请输入书名">
                <input type="text" id="author_name" style="width: 200px" placeholder="请输入作者">
                <input type="text" id="pageNumber" style="width: 200px" placeholder="请输入页数" oninput="value=value.replace(/[^\\d]/g,'')">

                <input type="date" id="publish" style="width: 100px" placeholder="请输入出版日期">

                </div>`
            ,
            yes: function (index, layero) {
                //console.log(document.querySelector("#author_name").value+"\n"+document.querySelector("button")+"\n")
                let bookName = document.querySelector("#book_name").value
                let authorName = document.querySelector("#author_name").value
                let pageNumber = document.querySelector("#pageNumber").value
                let publish = document.querySelector("#publish").value
                console.log(typeof publish + "\n" + publish + "\n" + typeof pageNumber + "\n" + pageNumber + "\n" + typeof bookName + "\n" + bookName)
                alert(bookName+"\n"+authorName+"\n"+pageNumber+"\n"+publish+"\n");
                document.querySelector(".layui-layer-close").click()

            },//按钮1回调

            btn2: function (index, layero) {
                document.querySelector(".layui-layer-close").click()
            },//按钮2回调

        })
    }
    function loading() {
        layer.load(1, {
            shade: [0.1, '#fff'] //0.1透明度的白色背景
        })

    }
    function closeLoading() {
        //关闭加载
        //一般是网络请求结束之后自动调用
        layer.closeAll('loading');
    }
</script>
</html>